:root {
  --loading-opacity: 0.38;
  --loading-desc-margin: 8px 0 0;
}

.var-loading {
  --loading-normal-width: 50px;
  --loading-normal-height: calc(var(--font-size-md) + 2px);
  --loading-large-width: 64px;
  --loading-large-height: calc(var(--font-size-lg) + 2px);
  --loading-small-width: 36px;
  --loading-small-height: calc(var(--font-size-sm) + 2px);
  --loading-mini-width: 22px;
  --loading-mini-height: calc(var(--font-size-xs) + 2px);

  position: relative;

  &__content {
    position: relative;
    transition: opacity 0.3s;
    opacity: 1;

    &--active {
      opacity: var(--loading-opacity);
    }

    &-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }

  &__body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
  }

  &__inside {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  &__description {
    color: var(--color-primary);
    margin: var(--loading-desc-margin);

    &--large {
      font-size: var(--font-size-lg);
    }

    &--normal {
      font-size: var(--font-size-md);
    }

    &--small {
      font-size: var(--font-size-sm);
    }

    &--mini {
      font-size: var(--font-size-xs);
    }
  }

  &__circle {
    display: flex;

    &-block {
      display: inline-block;
      color: var(--color-primary);
      animation: circle 1.8s linear infinite;

      &--large {
        width: 110px;
        height: 110px;
      }

      &--normal {
        width: 60px;
        height: 60px;
      }

      &--small {
        width: 30px;
        height: 30px;
      }

      &--mini {
        width: 18px;
        height: 18px;
      }

      svg {
        display: block;
        width: 100%;
        height: 100%;

        circle {
          animation: circular 1.5s ease-in-out infinite;
          stroke: currentColor;
          stroke-width: 2;
          stroke-linecap: round;
        }
      }
    }

    @keyframes circle {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes circular {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -40;
      }

      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -120;
      }
    }
  }

  &__wave {
    --loading-wave-size-item-width: 5px;
    --loading-wave-size-item-margin: 5px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    &--large {
      width: var(--loading-large-width);
      height: var(--loading-large-height);
    }

    &--normal {
      width: var(--loading-normal-width);
      height: var(--loading-normal-height);
    }

    &--small {
      width: var(--loading-small-width);
      height: var(--loading-small-height);
    }

    &--mini {
      width: var(--loading-mini-width);
      height: var(--loading-mini-height);
    }

    &-item {
      height: 100%;
      display: inline-block;
      animation: 1.2s ease-in-out infinite wave;
      background-color: var(--color-primary);

      &:nth-child(1) {
        animation-delay: -1.2s;
        margin-left: 0;
      }

      &:nth-child(2) {
        animation-delay: -1.1s;
      }

      &:nth-child(3) {
        animation-delay: -1s;
      }

      &:nth-child(4) {
        animation-delay: -0.9s;
      }

      &:nth-child(5) {
        animation-delay: -0.8s;
      }
    }

    &-item--large {
      width: var(--loading-wave-size-item-width);
      margin-left: var(--loading-wave-size-item-margin);
    }

    &-item--normal {
      width: calc(var(--loading-wave-size-item-width) - 1px);
      margin-left: calc(var(--loading-wave-size-item-margin) - 1px);
    }

    &-item--small {
      width: calc(var(--loading-wave-size-item-width) - 2px);
      margin-left: calc(var(--loading-wave-size-item-margin) - 2px);
    }

    &-item--mini {
      width: calc(var(--loading-wave-size-item-width) - 3px);
      margin-left: calc(var(--loading-wave-size-item-margin) - 3px);
    }

    @keyframes wave {
      0%,
      40%,
      100% {
        transform: scaleY(0.4);
      }
      20% {
        transform: scaleY(1);
      }
    }
  }

  &__cube {
    --loading-cube-size-item-width: 10px;
    --loading-cube-size-item-height: 10px;
    --loading-cube-size-item-margin: 5px;

    display: flex;
    align-items: center;
    flex-shrink: 0;

    &--large {
      width: var(--loading-large-width);
      height: var(--loading-large-height);
    }

    &--normal {
      width: var(--loading-normal-width);
      height: var(--loading-normal-height);
    }

    &--small {
      width: var(--loading-small-width);
      height: var(--loading-small-height);
    }

    &--mini {
      width: var(--loading-mini-width);
      height: var(--loading-mini-height);
    }

    &-item {
      display: inline-block;
      transform-origin: right bottom;
      animation: 1.5s ease infinite cube;
      background-color: var(--color-primary);

      &:nth-child(1) {
        animation-delay: 0.2s;
        margin-left: 0;
      }

      &:nth-child(2) {
        animation-delay: 0.4s;
      }

      &:nth-child(3) {
        animation-delay: 0.6s;
      }

      &:nth-child(4) {
        animation-delay: 0.8s;
      }
    }

    &-item--large {
      height: var(--loading-cube-size-item-height);
      width: var(--loading-cube-size-item-width);
      margin-left: var(--loading-cube-size-item-margin);
    }

    &-item--normal {
      height: calc(var(--loading-cube-size-item-height) - 2px);
      width: calc(var(--loading-cube-size-item-width) - 2px);
      margin-left: calc(var(--loading-cube-size-item-margin) - 1px);
    }

    &-item--small {
      height: calc(var(--loading-cube-size-item-height) - 4px);
      width: calc(var(--loading-cube-size-item-width) - 4px);
      margin-left: calc(var(--loading-cube-size-item-margin) - 2px);
    }

    &-item--mini {
      height: calc(var(--loading-cube-size-item-height) - 6px);
      width: calc(var(--loading-cube-size-item-width) - 6px);
      margin-left: calc(var(--loading-cube-size-item-margin) - 3px);
    }

    @keyframes cube {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: rotate(90deg) scale(0.3);
      }
    }
  }

  &__rect {
    --loading-rect-size-item-width: 8px;
    --loading-rect-size-item-height: 100%;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    &--large {
      width: var(--loading-large-width);
      height: var(--loading-large-height);
    }

    &--normal {
      width: var(--loading-normal-width);
      height: var(--loading-normal-height);
    }

    &--small {
      width: var(--loading-small-width);
      height: var(--loading-small-height);
    }

    &--mini {
      width: var(--loading-mini-width);
      height: var(--loading-mini-height);
    }

    &-item {
      animation: 2s ease-in-out infinite rect;
      background-color: var(--color-primary);

      &:nth-child(1) {
        animation-delay: 1.75s;
      }

      &:nth-child(2) {
        animation-delay: 1.5s;
      }

      &:nth-child(3) {
        animation-delay: 1.25s;
      }

      &:nth-child(4) {
        animation-delay: 1s;
      }

      &:nth-child(5) {
        animation-delay: 0.75s;
      }

      &:nth-child(6) {
        animation-delay: 0.5s;
      }

      &:nth-child(7) {
        animation-delay: 0.25s;
      }

      &:nth-child(8) {
        animation-delay: 0s;
      }
    }

    &-item--large {
      height: var(--loading-rect-size-item-height);
      width: var(--loading-rect-size-item-width);
    }

    &-item--normal {
      height: calc(var(--loading-rect-size-item-height) * 0.9);
      width: calc(var(--loading-rect-size-item-width) * 0.8);
    }

    &-item--small {
      height: calc(var(--loading-rect-size-item-height) * 0.8);
      width: calc(var(--loading-rect-size-item-width) * 0.6);
    }

    &-item--mini {
      height: calc(var(--loading-rect-size-item-height) * 0.7);
      width: calc(var(--loading-rect-size-item-width) * 0.4);
    }

    @keyframes rect {
      0% {
        opacity: 0.3;
      }
      25% {
        opacity: 1;
      }
      50% {
        opacity: 0.3;
      }
      65% {
        opacity: 1;
      }
      100% {
        opacity: 0.3;
      }
    }
  }

  &__disappear {
    --loading-disappear-size-item-width: 15px;
    --loading-disappear-size-item-height: 15px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: nowrap;
    flex-shrink: 0;

    &--large {
      width: var(--loading-large-width);
      height: var(--loading-large-height);
    }

    &--normal {
      width: var(--loading-normal-width);
      height: var(--loading-normal-height);
    }

    &--small {
      width: var(--loading-small-width);
      height: var(--loading-small-height);
    }

    &--mini {
      width: var(--loading-mini-width);
      height: var(--loading-mini-height);
    }

    &-item {
      border-radius: 50%;
      animation: 0.5s ease-in-out infinite alternate disappear;
      background-color: var(--color-primary);

      &:nth-child(1) {
        animation-delay: -0.4s;
      }

      &:nth-child(2) {
        animation-delay: -0.2s;
      }

      &:nth-child(3) {
        animation-delay: 0s;
      }
    }

    &-item--large {
      height: var(--loading-disappear-size-item-height);
      width: var(--loading-disappear-size-item-width);
    }

    &-item--normal {
      height: calc(var(--loading-disappear-size-item-height) * 0.8);
      width: calc(var(--loading-disappear-size-item-width) * 0.8);
    }

    &-item--small {
      height: calc(var(--loading-disappear-size-item-height) * 0.6);
      width: calc(var(--loading-disappear-size-item-width) * 0.6);
    }

    &-item--mini {
      height: calc(var(--loading-disappear-size-item-height) * 0.4);
      width: calc(var(--loading-disappear-size-item-width) * 0.4);
    }

    @keyframes disappear {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
